<template>
  <div class="xiangqing1">
    <head_><h1>订单详情</h1></head_>
    <p class="dingdanhao">
      <span>订单号：{{orderList.orderNo}}</span>
    </p>
    <span class="dingdanhao">
      <span>下单日期：{{this.orderList.startTime}}</span>
    </span>
    <div class="xinxi">

      <p class="carxin">车辆信息</p>
      <div>
        <div>
          <img :src="car.headPic" alt="" />
        </div>
        <div>
          <p style="color: #f3966e">{{ car.carName==null? this.$store.state.carinfo.carName :car.carName}}</p>
          <p style="margin-top: 30px">
            <span>{{car.vin}}</span>
            <i>|</i>
            <span>价格:</span><span>{{car.price}}</span>
            <i>|</i>
            <span>{{car.intro}}</span>
            <i>|</i>
            <span>{{carType.typeName}}</span>
            <i>|</i>
            <span>乘坐5人</span>
          </p>
        </div>
      </div>
    </div>

    <p class="xiangqing_day">租车时长：<span>{{dates()}}</span> 天</p>


    <div class="xiangqing1_total">
      <ul class="maney_ul">
        <li><span>定金:{{orderList.preparidAmount}}元</span><span>基本保险：{{carInsurance.insuredAmount}}</span></li>
        <li><span>取车时间：{{orderList.startTime}}</span><span>还车门店：{{shop.name}}</span></li>
        <li><span>取车城市：{{shop.address}}</span><span>还车城市：{{shop.address}}</span></li>
        <li><span>还车时间：{{orderList.endTime}}</span><span>取车门店：{{shop.name}}</span></li>
      </ul>

      <div class="botom_totalmoney_btn">
        <p>合计：<span>{{orderList.totalPrice}}</span> 元</p>
        <div>
          <van-button class="bot_btn_col" color="#eeeeee" @click="return_home">{{orderList.state === 4?'再次下单':'待支付'}}</van-button>
          <van-button class="bot_btn_col" color="#eeeeee" @click="go_good">预定/评价</van-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import head_ from "../header";
import xinxi_ from "./cheliangxinxi";
// import xiangqing1_total from "./xiangqing1_total";
export default {
  props: {},
  data() {
    return {
      orderList:{},
      car:{},
      carType:{},
      carInsurance:{},
      shop:{}
    };
  },
  comments:{xinxi_,head_},
  created() {
    this.intiTable();
  },
  components: {
    head_,
  },
  methods: {
    return_home(){
      this.$root.car=this.car;
      this.$root.car.price=this.orderList.totalPrice
      this.$root.car.typeName=this.carType.typeName;
      this.$store.state.shopname=this.shop.name
      this.$store.state.startime=this.orderList.startTime;
      this.$store.state.endtime=this.orderList.endTime;
      this.$root.order=this.orderList;
      if (this.orderList.state==4){
        this.$router.push({path:'/home/domestic'})
      }else{
        this.$router.push({path:'/dingdanxiangqing'})
      }




    },
    go_good(){
      if(this.orderList.state==4){
        this.$router.push({path: '/pingjia/'+this.car.id+"/"+this.orderList.clientId});
      }else{
        this.$message.error('请订单完成后评论');
      }
    },
    intiTable() {
      console.log(this.$route.params.id)
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.$http.get("/order/api/getOrder/" + id).then(result => {
          console.log(result)
          this.orderList = result.data.data.order;
          this.car =  result.data.data.car;
          this.carType=result.data.data.carType;
          this.carInsurance=result.data.data.carInsurance;
          this.shop=result.data.data.shop;
        })
      }
    },
    dates(){
      let start = new Date(this.orderList.startTime).getTime();
      let end = new Date(this.orderList.endTime).getTime();

      var day = (end - start) / 1000 / 60 / 60 / 24
      // return Math.ceil((end-start)/1000/60/60/24);
      return parseInt(day)
    },
  }
};
</script>

<style scoped lang="less">
.xinxi {
  margin-top: 0;
  div {
    div:nth-child(2) {
      p {
        position: relative !important;
      }
      p:nth-child(1) {
        top: 0.4rem !important;
      }
      p:nth-child(2) {
        top: -0.3rem !important;
      }
    }
  }
}
.xiangqing1 {
  width: 100%;
  font-size: 0.12rem;
  .dingdanhao {
    font-size: 0.23rem;
    color: #666666;
    display: flex;
    justify-content: space-between;
    padding: 0 0.29rem 0 0.38rem;
    height: 0.94rem;
    line-height: 0.94rem;
  }
}
.xiangqing_day {
  width: 100%;
  height: 0.8rem;
  border-top: 0.01rem solid #e0e0e0;
  border-bottom: 0.01rem solid #e0e0e0;
  font-size: 0.23rem;
  color: #666666;
  padding-left: 0.38rem;
  line-height: 0.8rem;
  span {
    font-size: 0.27rem;
    color: #333333;
    font-weight: 600;
  }
}


.xinxi {
  width: 95%;
  margin: 0 auto;
  height: 2.61rem;
  background: white;
  margin-top: 0.2rem;
  padding-top: 0.26rem;
  border-radius: 0.08rem;
  .carxin {
    width: 100%;
    height: 0.5rem;
    font-size: 0.29rem;
    font-weight: 600;
    padding-left: 0.34rem;
    margin-bottom: 0.08rem;
  }
  div {
    width: 100%;
    height: 1.3rem;
    display: flex;
    div:nth-child(1) {
      width: 2.85rem;
      height: 100%;
      display: flex;
      justify-content: center;
      img {
        width: 2.2rem;
        height: 100%;
      }
    }
    div:nth-child(2) {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      p:nth-child(1) {
        width: 100%;
        font-size: 0.34rem;
        font-weight: 600;
      }
      p:nth-child(2) {
        span {
          font-size: 0.26rem;
          color: #999999;
          margin-right: 0.2rem;
          line-height: 0.41rem;
        }
        i {
          font-size: 0.27rem;
          color: #dddddd;
          margin-right: 0.2rem;
        }
      }
    }
  }
}


.xiangqing1_total {
  width: 100%;
  .maney_ul {
    width: 100%;
    height: 2.59rem;
    padding: 0.1rem 0.38rem;
    border-bottom: 0.01rem solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    li {
      font-size: 0.23rem;
      color: 666666;
      span:last-child {
        width: 2rem;
        float: right;
        margin-right: 0.1rem;
      }
    }
  }
  .botom_totalmoney_btn {
    height: 5.03rem;
    p {
      font-size: 0.23rem;
      color: #333;
      margin-top: 0.24rem;
      padding-left: 0.38rem;
      margin-bottom: 0.6rem;
      font-weight: 600;
      span {
        font-size: 0.36rem;
        font-weight: 600;
        color: #333;
      }
    }
    div {
      display: flex;
      justify-content: center;
      button:first-child {
        margin-right: 0.4rem;
      }
      button {
        width: 2.5rem;
        height: 0.9rem;
        border: 0.01rem solid #cccccc !important;
        border-radius: 0.1rem;
      }
      .bot_btn_col span {
        color: #666;
        font-weight: 600;
        font-size: 0.29rem;
      }
    }
  }
}
</style>
